<template>
    <div class="goodsinfo-container">
        <!-- 商品轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <!-- <mt-swipe :auto="2000">
                        <mt-swipe-item v-for="item in imgList" :key="item.imgurl">
                            <img class="homeImg" :src="item.imgurl" alt="">
                        </mt-swipe-item>
                    </mt-swipe> -->
                    <swiper-box :lunbotuList="imgList" :isfull="false"></swiper-box>
                </div>
            </div>
        </div>

        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{info.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{info.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{info.sell_price}}</span>
                    </p>
                    <p>购买数量：<numbox class='numbox'></numbox></p>
                    
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>


        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{info.goods_no}}</p>
                    <p>库存情况：{{info.stock_quantity}}件</p>
                    <p>上架时间：{{info.add_time | dataFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="getDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="getComment(id)">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>
<style lang="scss" >
.goodsinfo-container{
    background: #eee;
    overflow: hidden;
    .mui-card-content-inner{
        padding: 0
    }
    .mint-swipe{
        height: 200px;
        .homeImg{
            width: 100%;
            height:100%
        }
        .mint-swipe-item {
            img{
                width: 100%;
                height: 100%;
            }

        }    
    }
    .mui-card-content{
        .mui-card-content-inner{
            padding: 0 15px;
            .now_price{
                font-size:16px;
                font-weight: bold;
            }
        }
        
    }
    .mui-card-footer{
        flex-direction: column;
        // display: block
        button{
            margin-bottom: 15px
        }
    }
}

</style>
<script>
// 初始化munbox组件
import mui from  "../../lib/mui/js/mui.min.js";
// mui(Selector).numbox()

import swiper from "../subcomponents/swiper.vue";
import numbox from "../subcomponents/goodsinfo_numberBox.vue";
export default {
   data(){
       return{
           imgList:[
               {thumb:"https://ps.ssl.qhimg.com/t01cb10723c36edc5c1.jpg"},
               {thumb:"https://ps.ssl.qhimg.com/t0147446412b2933834.jpg"},
               {thumb:"https://ps.ssl.qhimg.com/t017c2df278a12868eb.jpg"}
           ],
           id:this.$route.params.id,
           info:{}
       }
   },
   components:{
       'swiper-box':swiper,
       "numbox":numbox
   },
   mounted(){
       mui('.numbox').numbox();
       console.log(this.id)
       this.getInfo(this.id)
   },
   methods:{
       getInfo(id){
           var that = this;
           that.$http.get('../../data/goodsInfo.json').then(res=>{
               console.log(res.body)
               var resData = res.body;
               if(resData.code == 200){
                   resData.data.forEach(item=>{
                       console.log(item)
                       if(id == item.id){
                           that.info = item;
                           return false
                       }
                   })
               }
           })
       },
       getDesc(id){
           this.$router.push('/home/goodsdesc/'+id)
       }
   }
}
</script>